<template>
  <div class="main">
    <!-- 头部导航 -->
    <div class="header">
      <nav-bar
        left-arrow
        border="false"
        @click-left="onClickLeft"
      >
        <template #right >
          <icon name="contact" size="18" @click="onClickRight"/>
        </template>
      </nav-bar>
    </div>

    <!-- 图标 -->
    <div class="headerImg">
      <img src="../../assets/image/ic_header_logo.png" alt="" />
    </div>
    <p>华为账号</p>
    <p>登录账号以使用云空间、应用市场及更多服务</p>

    <!-- 账号密码 -->
    <!-- 可以使用 CellGroup 作为容器 -->
    <div class="userName">
      <cell-group inset>
        <field
          v-model="userName"
          placeholder="手机/邮箱地址/账户名"
          label-width="0"
        />
      </cell-group>
    </div>
    <div class="password">
      <cell-group inset>
        <field v-model="password" type="password" placeholder="密码" />
      </cell-group>
    </div>
    <div class="password">
      <cell-group inset>
        <field v-model="rePwd" type="password" placeholder="请再次输入密码" />
      </cell-group>
    </div>

    <div class="submit">
      <Button type="primary" size="large" class="login" @click="reg"
        >注册</Button
      >
      <router-link :to="{ name: 'Login' }">
        <Button type="default" size="large" class="register"
          >已有账号，去登陆</Button
        >
      </router-link>
    </div>

    <div class="help">
      <div>遇到问题</div>
      <div>隐私声明</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { NavBar, Icon, Field, CellGroup, Button, Toast } from "vant";
import { useRouter } from "vue-router";
import { regAPI } from "../../services/auth";
import { setToken } from "../../utils/auth";

const router = useRouter();
const userName = ref("");
const password = ref("");
const rePwd = ref("");
const onClickLeft = () => history.back();
const onClickRight = () => router.push({ name: "User" });

//调用注册的接口
const reg = async () => {
  if (userName.value && password.value && rePwd.value) {
    if (password.value == rePwd.value) {
      // 开始调接口
      const res = await regAPI({
        userName: userName.value,
        password: password.value,
      });

      if (res.code == 1) {
        console.log(11111);
        Toast.success("注册成功");
        setToken(res.data);
        setTimeout(() => {
          router.push({
            name: "User",
          });
        }, 2000);
        //
      } else {
        Toast.fail(res.data);
      }
    } else Toast.fail("两次输入密码不一致");
  } else {
    Toast.fail("请输入用户名和密码");
  }
};
</script>

<style scoped lang="scss">
.main {
  height: 100%;
  background-color: white;
  .headerImg {
    width: 40px;
    height: 40px;
    margin: 80px auto 15px auto;
    img {
      width: 40px;
      height: 40px;
    }
  }
  p:nth-child(3) {
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
  }
  p:nth-child(4) {
    text-align: center;
    font-size: 12px;
    color: #777;
    margin-bottom: 30px;
  }
  .userName,
  .password {
    width: 90vw;
    margin: 10px auto;
    border-bottom: 1px solid #999;
  }
  .other {
    width: 90vw;
    color: #007dff;
    margin: 30px auto;
    height: 20px;
    span:nth-child(1) {
      float: left;
    }
    span:nth-child(2) {
      float: right;
    }
  }
  .submit {
    width: 90vw;
    // margin-top: 150px;
    margin: 25px auto 20px auto;
    // border-radius: 6px;
    .login,
    .register {
      border-radius: 20px;
      height: 35px;
      // margin-bottom: 10px;
    }
    .register {
      background-color: #f2f2f2;
      margin-top: 15px;
      color: #007dff;
    }
  }

  .help {
    width: 180px;
    margin: 276px auto 0 auto;
    font-size: 14px;
    color: #007dff;
    text-align: center;
    div:nth-child(1) {
      width: 50%;
      float: left;
      border-right: 1px solid #999;
    }
    div:nth-child(2) {
      width: 50%;
      float: right;
    }
  }
}
</style>
